import "./BookRanking.css";
import React from "react";

class Index extends React.Component {
  constructor() {
    super();
    this.state = {
      published: {
        publishRList: [],
        publishSList: [],
        publishNList: [],
        boyRList: [],
        boySList: [],
        boyNList: [],
        girlRList: [],
        girlSList: [],
        girlNList: [],
      },

      nowBook: { recommendBook: 0, sellingBook: 0, newBook: 0, recommendboyBook: 0, sellingboyBook: 0, newboyBook: 0, recommendgirlBook: 0, sellinggirlBook: 0, newgirlBook: 0,},
    };
  }

  componentDidMount() {
    this.getBookRankingData("出版", "推荐", "publishRList");
    this.getBookRankingData("出版", "畅销", "publishSList");
    this.getBookRankingData("出版", "新书", "publishNList");

    this.getBookRankingData("男频", "推荐", "boyRList");
    this.getBookRankingData("男频", "畅销", "boySList");
    this.getBookRankingData("男频", "新书", "boyNList");

    this.getBookRankingData("女频", "推荐", "girlRList");
    this.getBookRankingData("女频", "畅销", "girlSList");
    this.getBookRankingData("女频", "新书", "girlNList");
  }

  //   获取图书的排行榜
  getBookRankingData = (bookClass, rankingType, list) => {
    this.axios({
      url: "/index/getBookRanking",
      method: "post",
      data: { bookClass: bookClass, rankingType: rankingType },
    }).then((data) => {
      let newData = JSON.parse(JSON.stringify(this.state.published));
      newData[list] = data.data.data;
      this.setState({
        published: newData,
      });
    });
  };

  // 根据数据的得到畅销图书列表
  getBestsellers = (List, type) => {
    if (List) {
      return List.map((item, i) => {
        return (
          <div
            className="List"
            onMouseOver={() => this.changeNowBook(type, i)}
            key={i}
            style={
              this.state.nowBook[type] === i
                ? { height: "125.6px" }
                : { height: "36.6px" }
            }
          >
            <div>
              <p>{i + 1}</p>
              <div>
                <span onClick={() => this.gotoBookDetails2(item)}>
                  {item.bookName}
                </span>
                <div className="readNum">
                  <span className="iconfont icon-ai-eye "></span>
                  <span>{item.readNum}</span>
                </div>
              </div>
            </div>
            <img
              alt=""
              src={`http://localhost:8888${item.bookImg}`}
              onClick={() => this.gotoBookDetails2(item)}
            ></img>
          </div>
        );
      });
    }
  };

  changeNowBook(type, index) {
    console.log(index);
    let newBook = JSON.parse(JSON.stringify(this.state.nowBook));
    newBook[type] = index;
    this.setState({
      nowBook: newBook,
    });
  }

  gotoCircle = () => {
    this.props.history.push({
      pathname: "/TotalEntry/CircleDetails",
    });
  };

  // 点击图书跳转到对应的图书详情
  gotoBookDetails = (item) => {
    console.log(item);
    this.props.history.push({
      pathname: "/TotalEntry/BookDetails",
      state: { id: item.id },
    });
  };
  gotoBookDetails2 = (item) => {
    console.log(item);
    this.props.history.push({
      pathname: "/TotalEntry/BookDetails",
      state: { id: item.bookId },
    });
  };

  // 点击图书的分类跳转到分类模块
  gotoClass = (index, num) => {
    this.props.history.push({
      pathname: "/TotalEntry/Classification",
      state: { index: index, num: num },
    });
  };

  render() {
    return (
      <div className="bigDiv">
        <div className="publishedRanking">
          <div className="typeName">
            <h1>出版图书</h1>
            <p style={{ color: "#9e9e9e" }}>—— 排行榜 ——</p>
          </div>
          <div className="showRanking">
            <div className="ShowDiv">
              <p className="recommend">编辑推荐</p>
              {this.getBestsellers(
                this.state.published.publishRList,
                "recommendBook"
              )}
            </div>
            <div className="ShowDiv">
              <p className="selling">畅销图书</p>
              {this.getBestsellers(
                this.state.published.publishSList,
                "sellingBook"
              )}
            </div>
            <div className="ShowDiv">
              <p className="new">新书上榜</p>
              {this.getBestsellers(
                this.state.published.publishNList,
                "newBook"
              )}
            </div>
          </div>
        </div>
        <div className="boyRanking">
          <div className="typeName">
            <h1>男生频道</h1>
            <p style={{ color: "#9e9e9e" }}>—— 排行榜 ——</p>
          </div>
          <div className="showRanking">
            <div className="ShowDiv">
              <p className="recommend">编辑推荐</p>
              {this.getBestsellers(
                this.state.published.boyRList,
                "recommendboyBook"
              )}
            </div>
            <div className="ShowDiv">
              <p className="selling">畅销图书</p>
              {this.getBestsellers(
                this.state.published.boySList,
                "sellingboyBook"
              )}
            </div>
            <div className="ShowDiv">
              <p className="new">新书上榜</p>
              {this.getBestsellers(
                this.state.published.boyNList,
                "newboyBook"
              )}
            </div>
          </div>
        </div>
        <div className="girlRanking">
          <div className="typeName">
            <h1>女生频道</h1>
            <p style={{ color: "#9e9e9e" }}>—— 排行榜 ——</p>
          </div>
          <div className="showRanking">
            <div className="ShowDiv">
              <p className="recommend">编辑推荐</p>
              {this.getBestsellers(
                this.state.published.girlRList,
                "recommendgirlBook"
              )}
            </div>
            <div className="ShowDiv">
              <p className="selling">畅销图书</p>
              {this.getBestsellers(
                this.state.published.girlSList,
                "sellinggirlBook"
              )}
            </div>
            <div className="ShowDiv">
              <p className="new">新书上榜</p>
              {this.getBestsellers(
                this.state.published.girlNList,
                "newgirlBook"
              )}
            </div>
          </div>
        </div>
      </div>
    );
  }
}
export default Index;
